<template>
  <div class="app-container">
    <el-card class="card">
      <!-- 工具条 -->
      <div class="tools-div">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd()">新增</el-button>
      </div>
      <el-table
        :data="formDataList"
        style="width: 100%;margin-bottom: 20px;margin-top: 20px;"
        row-key="id"
        border
        size='small'
        :default-expand-all="false"
        :tree-props="{children: 'children'}">

        <el-table-column prop="menuName" label="菜单名称" align="center" fixed="left" width="200"/>
        <el-table-column label="菜单类型" align="center" width="200">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.menuType === '0'">{{ scope.row.menuTypeName }}</el-tag>
            <el-tag  type="success" v-if="scope.row.menuType === '1'">{{ scope.row.menuTypeName }}</el-tag>
            <el-tag  type="warning" v-if="scope.row.menuType === '2'">{{ scope.row.menuTypeName }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="图标" align="center" width="200">
          <template slot-scope="scope">
            <i :class="scope.row.icon"/>
          </template>
        </el-table-column>
        <el-table-column prop="router" label="路由地址" align="center" width="200"/>
        <el-table-column prop="permissionCode" label="权限标识" align="center" width="200"/>
        <el-table-column prop="sort" label="排序" align="center" width="160"/>
        <el-table-column prop="showFlagName" label="是否显示" align="center" width="160"/>
        <el-table-column label="操作" align="center" fixed="right" width="260">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" v-if="scope.row.menuType !== '2'" @click="handleAddChildren(scope.row)">添加下级</el-button>
            <el-button type="primary" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="handleDelete(scope.row.id)" :disabled="scope.row.children.length > 0">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <menu-form ref="addForm" @saveAfter="saveAfter"/>

  </div>
</template>


<script>

import { findMenuTree, deleteByLogic } from '@/api/sys/menu'
import MenuForm from './menuForm.vue'

export default {
  components: {
      MenuForm
  },
  // 定义数据
  data() {
    return {
      formDataList: []
    }
  },

  //当页面加载时获取数据
  created() {
    this.handleGetList()
  },

  methods: {
    handleGetList() {
      findMenuTree().then(res => {
        this.formDataList = res.data
      })
    },
    handleAdd() {
      this.$refs.addForm.create()
    },
    handleEdit(row) {
      this.$refs.addForm.update(row)
    },
    handleAddChildren(row) {
      this.$refs.addForm.createChildren(row)
    },
    saveAfter() {
      this.handleGetList()
    },
    // 删除
    handleDelete(id) {
      this.$confirm('确定要删除吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
          deleteByLogic(id).then(res => {
              if (res.status === 200) {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
                this.handleGetList()
              } else {
                this.$message({
                  type: 'info',
                  message: res.message
                })
              }
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除！'
          })
        })
    }
  }
}
</script>

<style scoped>
.card {
  height: 100%;
  margin: 15px;
}
</style>
